<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/shoppingcart.css" />
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div class="body">
			<div class="shop"><i></i><span>我的购物车</span></div>
			<div class="product">
				<div class="product-box">
					<div class="product-ckb"><em class="product-em product-xz"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a3.png" class="product-img" />
							<span class="product-name">酷冷至尊(Cooler Master)T610P CPU风冷散热器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a1.png" class="product-img" />
							<span class="product-name">游戏悍将 35英寸曲面电竞显示器21:9带鱼屏准4K游戏显示器</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">2099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a2.png" class="product-img" />
							<span class="product-name">技嘉（GIGABYTE） 2080TURBO OC 8GC</span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1099</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>

				<div class="product-box">
					<div class="product-ckb"><em class="product-em"></em></div>
					<div class="product-sx">
						<a href="###">
							<img src="img/a4.png" class="product-img" />
							<span class="product-name">AMD 锐龙 5 2600X 处理器 (R5) 6核12线程 AM4 </span>
						</a>
						<span class="product-price">¥&thinsp;<span class="price">1299</span></span>
						<div class="product-amount">
							<div class="product_gw">
								<em class="product-jian">-</em>
								<input type="text" value="1" class="product-num" />
								<em class="product-add">+</em>
							</div>
						</div>
						<div class="product-del"><img src="img/deleteico.png" /></div>
					</div>
				</div>
			</div>
			<div class="product-js">
				<div class="product-al">
					<div class="product-all">
						<em class=""></em>
					</div>
					<div class="all-xz"><span class="product-all-qx">全选</span>
						<div class="all-sl" style="display: none;">(<span class="product-all-sl">0</span>)</div>
					</div>
				</div>
				<a href="#" class="product-sett product-sett-a">结算</a>
				<div class="all-product"><span class="all-product-a">¥&thinsp;<span class="all-price">296</span></span></div>

			</div>
		</div>
		<!--购物车空-->
		<div class="kon-cat">
			<div class="catkon">
				<div class="kon-box">
					<div class="kon-hz">
						<img src="img/cart-air.png" />
						<span class="kon-wz">购物车什么都没有</span>
						<a href="###" class="kon-lj">去逛逛</a>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		//179000516 王德令
		//1)商品的数量可以“加”、“减”,且不能小于1
		$(".product-add").click(function() {
			$(this).prev().val(parseInt($(this).prev().val()) + 1);
			total();
		});
		$(".product-jian").click(function() {
			if (parseInt($(this).next().val()) > 1) {
				$(this).next().val(parseInt($(this).next().val()) - 1)
			} else {
				if (window.confirm("商品数量不能小于1，请问是否删除")) {
					$(this).parent().parent().parent().parent().remove();
				}
			}
			total();
		});
		
		//2)点击“垃圾桶”，可以从购物车中移除该商品，删除时需要弹出确认对话框。
		$(".product-del").click(function() {
			confirm("是否选择移除商品");
			$(this).closest('.product-box').remove()
		});
		
		//3)商品选中与未选中可以切换
		$(".product-em").click(function() {
			if ($(this).hasClass("product-xz")) {
				$(this).removeClass("product-xz")
			} else {
				$(this).addClass("product-xz");
			}
		
			if ($(".product-em.product-xz").length == 4) {
				$(".product-all").find("em").addClass("product-all-on")
			} else {
				$(".product-all").find("em").removeClass("product-all-on")
			}
			
		//4)最下方单选按钮实现全选功能
		$(".product-all").click(function() {
			if ($(this).find("em").hasClass("product-all-on")) {
				$(this).find("em").removeClass("product-all-on");
				$(".product-em").removeClass("product-xz");
				$(".product-sett").addClass("product-sett-a");
			} else {
				$(this).find("em").addClass("product-all-on");
				$(".product-em").addClass("product-xz");
				$(".product-sett").removeClass("product-sett-a");
			}
			total();
		})
		
		//5)任何操作，都能够实时反应出订单总额的变化
		function total() {
			let checkboxs = $(".product-em");
			let priceSpans = $(".price");
			let countInput = $(".product-num");
			let totalPrice = 0;
			for (let i = 0; i < priceSpans.length; i++) {
				if ($(checkboxs[i]).hasClass("product-xz")) {
					let price = parseFloat($(priceSpans[i]).text());
					let count = parseInt($(countInput[i]).val());
					totalPrice += price * count;
				}
			}
			$(".all-price").html(totalPrice);
		}
		
		//6)如何一个商品都没有选中，结算按钮变灰不可点击
			if ($(".product-em").hasClass("product-xz")) {
				$(".product-sett").removeClass("product-sett-a");
			}else{
				$(".product-sett").addClass("product-sett-a");
			}
			total();
		});
		
		//7)如果购物车的商品被清空，则页面显示如下：
		$(".product-del").click(function() {
			if ($(".product").children().length == 0) {
				$(".kon-cat").css("display", "block")
			}
			total();
		});
	</script>
</html>
